<template>
  <div>
    <el-form
        :model="SocketClientSendInfo"
        size="small"
        label-width="100px"
        label-position="left"
    >
      <el-form-item label="设备" width="120px">
        <el-select
            v-model="SocketClientSendInfo.DataSourceId"
            placeholder="请选择设备"
            clearable
            style="width: 90%"
        >
          <el-option
              v-for="item in optionDevices"
              :key="item.Id"
              :label="item.DeviceName"
              :value="item.Id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发送内容" width="120px">
        <data-source-input
            :datasource-item="SocketClientSendInfo?.SendMessage"
            :node-id="SocketClientSendInfo?.SendMessage.DataSourceId"
            :param-name="SocketClientSendInfo?.SendMessage.ParamName"
            null-message="请选择数据来源（不能为空）"
            @change="onChange($event)"
        />
      </el-form-item>
      <el-form-item label="等待回调" width="120px">
        <el-switch
            v-model="SocketClientSendInfo.IsWaitCallBack"
            active-text="是"
            inactive-text="否"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="结束字符" width="120px">
        <data-source-input
            :datasource-item="SocketClientSendInfo?.EndCharacter"
            :node-id="SocketClientSendInfo?.EndCharacter.DataSourceId"
            :param-name="SocketClientSendInfo?.EndCharacter.ParamName"
            null-message="请选择数据来源（不能为空）"
            @change="onChangeEndCharacter($event)"
        />
        <!--        <el-input v-model="SocketClientSendInfo.EndCharacter" placeholder="请输入" style="width: 90%"></el-input>-->
      </el-form-item>
      <el-form-item label="描述">
        <el-input
            v-model="SocketClientSendInfo.Desc"
            type="textarea"
            :rows="6"
            placeholder="请输入描述"
            style="width: 90%"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Utils from '../../../../utils/Common'
import FlowNodeDataApi from '@/api/flow/FlowNodeDataApi'
import NodeConfigMixin from '../../../../libs/NodeConfigMixin'
import DataSourceInput from "@/vue2-flow/src/views/flow/components/NodeInputSourceDataComponent.vue";

export default {
  name: 'SocketClientSend',
  components: { DataSourceInput },
  mixins: [NodeConfigMixin],
  data () {
    return {
      SocketClientSendInfo: {
        DataSourceId: null,
        SendMessage: {},
        IsWaitCallBack: false,
        Desc: null,
        EndCharacter: {}
      },
      optionDevices: []
    }
  },
  methods: {
    /**
     * 选择结束字符
     * @param item
     */
    onChangeEndCharacter (item) {
      if (!Utils.IsEmpty(item)) {
        if (Utils.IsEmpty(this.SocketClientSendInfo.EndCharacter)) {
          this.SocketClientSendInfo.EndCharacter = {
            ParamName: null,
            DataSource: null,
            DataSourceId: null
          }
        }
        this.SocketClientSendInfo.EndCharacter.ParamName = item.ParamName
        this.SocketClientSendInfo.EndCharacter.DataSource = item.DataSource
        this.SocketClientSendInfo.EndCharacter.DataSourceId = item.nodeId
      } else {
        this.SocketClientSendInfo.EndCharacter = {}
      }
    },
    onChange (item) {
      if (!Utils.IsEmpty(item)) {
        if (Utils.IsEmpty(this.SocketClientSendInfo.SendMessage)) {
          this.SocketClientSendInfo.SendMessage = {
            ParamName: null,
            DataSource: null,
            DataSourceId: null
          }
        }
        this.SocketClientSendInfo.SendMessage.ParamName = item.ParamName
        this.SocketClientSendInfo.SendMessage.DataSource = item.DataSource
        this.SocketClientSendInfo.SendMessage.DataSourceId = item.nodeId
      } else {
        this.SocketClientSendInfo.SendMessage = {}
      }
    },
    ShowNodeData () {
      this.optionDevices = this.$store.getters.driver
      const _node = this.currentClickNodeMixin
      this.SetFormValue(_node)
    },

    /**
     * 设置回显的表单数据
     * @param _node
     * @constructor
     */
    SetFormValue (_node) {
      if (!Utils.IsEmpty(_node?.nodeInputParam?.NodeSocket)) {
        const from = {}
        from.DataSourceId = _node.nodeInputParam.NodeSocket.DataSourceId
        from.IsWaitCallBack = _node.nodeInputParam.NodeSocket.IsWaitCallBack
        from.Desc = _node.nodeInputParam.Desc
        from.id = _node.id
        if (_node?.nodeInputParam?.NodeSocket?.EndCharacter) {
          from.EndCharacter = _node.nodeInputParam.NodeSocket.EndCharacter
        } else {
          from.EndCharacter = {}
        }
        if (_node?.nodeInputParam?.NodeSocket?.SendMessage) {
          from.SendMessage = _node.nodeInputParam.NodeSocket.SendMessage
        }
        this.SocketClientSendInfo = from
      }
    },
    _SaveNode (NodeName) {
      const SocketClient = this.SocketClientSendInfo
      const params = {
        NodeSocket: {
          DataSourceId: SocketClient.DataSourceId,
          SendMessage: SocketClient.SendMessage,
          IsWaitCallBack: SocketClient.IsWaitCallBack,
          EndCharacter: SocketClient.EndCharacter
        },
        Desc: SocketClient.Desc
      }
      new FlowNodeDataApi().Install(this.currentClickNodeMixin.id, params, NodeName)
    }
  },
  mounted () {
    this.ShowNodeData()
  }
}
</script>

<style scoped lang="less">

</style>
